
import React, { useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import 'echarts-gl'
import leafGreen from "../../assets/img/leaf-green.png"
import "./index.scss"
import flvjs from 'flv.js';
import ReactPlayer from 'react-player';

export default function Index() {
  const echartsRef = useRef(null);
  const videoRef = useRef(null);
  // const videoRef = useRef(null);
  let player = null;
  const url = "http://120.82.196.52:18080/rtp/44060100001180000011_44060100001320000186.live.flv";

  useEffect(() => {
    if (flvjs.isSupported()) {
      player = flvjs.createPlayer({
        type: 'flv',
        url: url //'http://120.82.196.52:18080/rtp/44060100001180000011_44060100001320000186.live.flv'
      });
      player.attachMediaElement(videoRef.current);
      player.load();
      // player.play();
    }
    return () => {
      if (player) {
        player.pause();
        player.unload();
        player.detachMediaElement();
        player.destroy();
        player = null;
      }
    };
  }, [url]);
  // useEffect(() => {
  //   if (flvjs.isSupported()) {
  //     const flvPlayer = flvjs.createPlayer({
  //       type: 'flv',
  //       url: 'http://120.82.196.52:18080/rtp/44060100001180000011_44060100001320000186.live.flv', // 替换为你的FLV视频URL
  //     });
  //     flvPlayer.attachMediaElement(videoRef.current);
  //     flvPlayer.load();
  //     // flvPlayer.load();
  //     flvPlayer.play();
  //     return () => {
  //       if (flvPlayer) {
  //         flvPlayer.pause();
  //         flvPlayer.unload();
  //         flvPlayer.detachMediaElement();
  //         flvPlayer.destroy();
  //         flvPlayer = null;
  //       }
  //     }
  // }, []);
  return (
    <div>
      <img src={leafGreen} style={{ width: '100px', height: '100px' }} />
      <div>
        {/* {http://vjs.zencdn.net/v/oceans.mp4} */}
        {/* <video ref={videoRef}  style={{ width: '700px', height: '700px' }} ></video> */}
        <video
          ref={videoRef}
          controls
          width="100%"
          height="auto"
          style={{ maxWidth: '100%' }}
        />
        <ReactPlayer
          // url='https://www.youtube.com/watch?v=LXb3EKWsInQ'
          style={{ width: '300px', height: '400px' }}
          url="http://120.82.196.52:18080/rtp/44060100001180000011_44060100001320000186.live.flv"
          playing={true} // 自动播放
          controls={true} // 显示控制条
          // volume={0.5} // 音量设置为 50%
          // loop={true} // 循环播放
          // playbackRate={1.5} // 播放速度 1.5 倍
        />
      </div>
    </div>
  );
}



